<template>
  <div style="padding: 10px">
    <!--    功能-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <!--    搜素-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="公交ID" sortable> </el-table-column>
      <el-table-column prop="username" label="出发站"> </el-table-column>
      <el-table-column prop="nickName" label="第一站"> </el-table-column>
      <el-table-column prop="age" label="第二站"> </el-table-column>
      <el-table-column prop="sex" label="第三站"> </el-table-column>
      <el-table-column prop="address" label="终点站"> </el-table-column>
      <!--      操作一栏-->
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <!--删除字符处理结果-->
          <el-popconfirm title="确定删除此用户吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger" style="background-color: red">删除</el-button>
            </template>
          </el-popconfirm>

          <!--          <el-button type="text" size="small">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <!--    跳转页面-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5,10,15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>

      <el-dialog title="提示" v-show="dialogVisible" width="30%">
        <template #footer>
        <el-form :model="form" label-width="120px">/
          <el-form-item label="出发站">
            <el-input v-model="form.username" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="第一站">
            <el-input v-model="form.nickName" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="第二站">
            <el-input v-model="form.age" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="第三站">
            <el-input v-model="form.sex" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="终点站">
            <el-input text="textarea" v-model="form.address" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <span>   请确认以上信息！</span>

            <span class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from "../util/request";
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      dialogVisible: false,
      form: {},
      search: '',
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      request.get("http://localhost:8888/api/user",{
        params: {
          pageNum:this.currentPage4,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total= res.data.total
      })
    },
    add(){
      this.dialogVisible=true,
      this.form={}
    },
    save(){
      if(this.form.id){
        request.put("http://localhost:8888/api/user",this.form).then(res =>{
          console.log(res)
          if(res.code ==='0'){
            this.$message({
              type:"success",
              message:"更新成功"
            })
          }else{
            this.$message({
              type:"error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible=false  //关闭弹窗
        })
      }else{
        request.post("http://localhost:8888/api/user",this.form).then(res =>{
          console.log(res)
          if(res.code ==='0'){
            this.$message({
              type:"success",
              message:"增加成功"
            })
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible=false  //关闭弹窗
        })
      }
    },
    handleEdit(row) {
      this.form= JSON.parse(JSON.stringify(row))
      this.dialogVisible =true
    },
    handleDelete(id){
      console.log(id)
      request.delete("http://localhost:8888/api/user/"+id).then(res=>{
        if(res.code ==='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load() //刷新表格的数据
        this.dialogVisible=false  //关闭弹窗
      })
    },
    handleSizeChange(pageSize){//改变当前每页的个数触发
      this.pageSize=pageSize
      this.load() //刷新表格的数据
    },
    handleCurrentChange(pageNum){  //改变当前页码触发
      this.currentPage4=pageNum
      this.load() //刷新表格的数据
    }
  }
}
</script>
